<template>
  <div class="login-box">
    <div class="form-box">
      <div class="login-title">{{ title }}</div>
      <div class="form-content">
        <div class="title">账号登录</div>
        <el-form ref="loginRef" :model="loginObj.formData" :rules="loginObj.rules">
          <el-form-item prop="userName" label="">
            <el-input
              v-model="loginObj.formData.userName"
              placeholder="请输入手机号/用户工号/用户编码"
              type="text"
              clearable
              autocomplete="off"
            >
              <template #prefix>
                <i class="iconfont icon-zhanghao"></i>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item prop="password" label="">
            <el-input
              v-model="loginObj.formData.password"
              placeholder="请输入密码"
              type="password"
              clearable
              show-password
            >
              <template #prefix>
                <i class="iconfont icon-mima"></i>
              </template>
            </el-input>
          </el-form-item>
          <div class="top-button-box" @click="handleLogin"><span>登录</span></div>
          <div class="bottom-btn">
            <el-checkbox v-model="loginObj.formData.remember" class="item-checkbox">记住密码</el-checkbox>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import useUserStore from '@/store/modules/user'
import useMenuStore from '@/store/modules/menu'
import { getQuery } from '@/utils/index'
import type { FormInstance, FormRules } from 'element-plus'
import cache from '@/plugins/cache'
import { setSystemParams } from '@/utils/config'
import { useProxy } from '@/utils/proxy'
import { login } from './api'
import { setToken } from '@/utils/auth'
import watermark from '@/utils/water'
const title = import.meta.env.VITE_APP_TITLE
const { proxy } = useProxy()
const loginRef = ref<FormInstance>()
const userStore = useUserStore()
const menuStore = useMenuStore()
const router = useRouter()
const loginObj = reactive({
  sendSubmiting: false,
  formData: {
    userName: '',
    password: '',
    remember: false
  },
  rules: {
    userName: [{ required: true, message: '请输入手机号/用户工号/用户编码', trigger: 'blur' }],
    password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
  } as FormRules
})
const handleLogin = async () => {
  await loginRef.value?.validate((valid) => {
    if (valid) {
      if (loginObj.sendSubmiting) return
      loginObj.sendSubmiting = true
      loginSubmit()
    }
  })
}
// 调用登录接口登录
const loginSubmit = () => {
  const { userName, password, remember } = { ...loginObj.formData }
  login({ userName, password })
    .then((res: any) => {
      setToken(res.data.tokenValue)
      proxy.$api.getParamsListNo<any>().then((res) => {
        setSystemParams(res.data)
      })
      if (remember) {
        cache.local.setJSON(
          'debtAccountInfo',
          {
            userName,
            password
          },
          true
        )
      } else {
        cache.local.remove('accountInfo')
      }
      userStore.getInfoData().then(() => {
        if (res.data.needChangePassword) {
          router.replace({ path: '/editPwd' })
        } else {
          let redirect = getQuery('redirect')
          menuStore.changeisSetMenu(false)
          router.replace({ path: redirect || '/' })
        }
        watermark.set(userStore?.userInfo?.userName || '管理员')
      })
    })
    .catch(() => {
      loginObj.sendSubmiting = false
    })
}
// 初始化逻辑
const init = () => {
  let accountInfo: any = cache.local.getJSON('debtAccountInfo', true)
  if (accountInfo) {
    loginObj.formData.userName = accountInfo.userName || ''
    loginObj.formData.password = accountInfo.password || ''
    loginObj.formData.remember = accountInfo.userName && accountInfo.password ? true : false
  }
}
init()
</script>

<style lang="scss" scoped>
.login-box {
  width: 100%;
  min-width: 1100px;
  min-height: 600px;
  height: 100%;
  background: url(../../assets/images/login-bg.png) no-repeat;
  background-size: 100% 100%;
  position: relative;
  .form-box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    .login-title {
      width: 100%;
      text-align: center;
      font-size: 32px;
      font-weight: bold;
      color: #ffffff;
      margin-bottom: 45px;
    }

    .form-content {
      width: 382px;
      height: 382px;
      background: #ffffff;
      box-shadow: 0px 0px 29px 1px rgba(99, 140, 236, 0.16);
      border-radius: 11px 11px 11px 11px;
      text-align: center;
      padding: 45px;
      box-sizing: border-box;
      .title {
        font-size: 22px;
        color: #333333;
        font-weight: bold;
        margin-bottom: 45px;
      }

      .top-button-box {
        margin-top: 45px;
        height: 43px;
        line-height: 43px;
        letter-spacing: 12px;
        border-radius: 4px 4px 4px 4px;
        span {
          margin-left: 12px;
        }
      }
      .iconfont {
        font-size: 20px;
        color: #666;
      }
      :deep(.el-form-item) {
        margin-bottom: 20px;
        position: relative;
        border-radius: 0;
      }
      :deep(.el-form-item.is-error .el-input__wrapper) {
        box-shadow: none;
        border-bottom: 1px solid #ff554e;
        border-radius: 0;
      }
      :deep(.el-form-item__error) {
        padding-left: 44px;
        padding-top: 6px;
      }
      :deep(.el-input__wrapper, .el-input__wrapper.hover, .el-input__wrapper.is-focus) {
        border: none;
        border-radius: 0;
        border-bottom: 1px solid #ccc;
        box-shadow: none;
      }
      :deep(.el-input__inner) {
        padding-left: 4px;
        border-radius: 0;
      }
      .bottom-btn {
        margin-top: 6px;
        color: #333333;
        text-align: left;
        .item-checkbox {
          :deep(.el-checkbox__label) {
            font-size: 16px;
          }
        }
      }
    }
  }
}
</style>
